<template>
  <el-dialog :close-on-click-modal="false" append-to-body width="70%"  title="详情" :visible="show" :before-close="close">
    <div class="content">
      <div class="left">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="工单号">{{ form.instanceBizCode }}</el-descriptions-item>
          <el-descriptions-item label="案卷类型">{{ form.sourceName }}</el-descriptions-item>
          <el-descriptions-item label="事件类型">{{ form.categoryName }}</el-descriptions-item>
          <el-descriptions-item v-if="form.type" label="问题类型">{{ form.typeName||'--' }}</el-descriptions-item>
          <el-descriptions-item v-if="form.subType" label="详细类型">{{ form.subTypeName||'--' }}</el-descriptions-item>
          <el-descriptions-item label="事件描述">{{ form.content }}</el-descriptions-item>
          <el-descriptions-item label="详细地址">{{ form.address }}</el-descriptions-item>
          <el-descriptions-item label="坐标">
            <MapMarker ref="MapMarker" :location="form.location"></MapMarker>
          </el-descriptions-item>
          <el-descriptions-item label="照片"><ImagePreviews :src="form.pics"></ImagePreviews></el-descriptions-item>
          <el-descriptions-item label="上报时间">{{ form.instanceGmtCreate }}</el-descriptions-item>
          <el-descriptions-item label="处理部门">{{ form.instanceDeptName }}</el-descriptions-item>
          <el-descriptions-item label="要求完成时间">{{ form.gmtTimeLimit }}</el-descriptions-item>
          <el-descriptions-item label="处置时间">{{ form.gmtHandle }}</el-descriptions-item>
          <el-descriptions-item label="处置人">{{ form.handlerName }}</el-descriptions-item>
          <el-descriptions-item label="处置人部门">{{ form.handlerDeptName }}</el-descriptions-item>
          <el-descriptions-item label="审核状态">{{ form.audit==-1?'未审核':form.audit==1?'通过':'未通过' }}</el-descriptions-item>
          <el-descriptions-item label="是否超期" v-if="form.expired">{{ form.expired == 1?'超期':'未超期' }}</el-descriptions-item>
          <!-- <el-descriptions-item label="状态">{{ form.status == 1 ? '已提交' : form.status == 2 ? '已处置/已审核' : form.status == 3 ? '已完结' : '其他' }}</el-descriptions-item> -->
        </el-descriptions>
      </div>
      <div class="right">
        <el-timeline :reverse="true">
          <el-timeline-item v-for="(dot, index) in history" :key="index">
            <div class="row">
              <div class="key">{{ dot.name || '--' }}【{{ dot.endTime||dot.gmtFinished || '--' }}】</div>
            </div>
            <div class="row" v-if="dot.handlerName">
              <div class="key">上报人：</div>
              <div class="value">{{ dot.handlerName || '--' }}</div>
            </div>
            <div class="row" v-if="dot.executorName">
              <div class="key">操作人：</div>
              <div class="value">{{ dot.executorName || '--' }}</div>
            </div>
            <div class="row" v-if="dot.deptName">
              <div class="key">操作人部门：</div>
              <div class="value">{{ dot.deptName || '--' }}</div>
            </div>
            <div class="row" v-if="dot.status!=null">
              <div class="key">状态：</div>
              <div class="value">{{ getState(dot.status) }}</div>
            </div>
            <div class="row" v-if="dot.variables && dot.variables.remark">
              <div class="key">备注：</div>
              <div class="value">{{ dot.variables.remark || '--' }}</div>
            </div>
            <div class="row" v-if="dot.variables && dot.variables.handlePics">
                <el-image v-for="(item,index) in getImgUrl(dot.variables.handlePics)" :key="index" style="width: 60px; height: 60px;border-radius:8px;margin-right:8px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);" :src="item" :preview-src-list="getImgUrl(dot.variables.handlePics)"></el-image>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="close">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import MapMarker from '@/components/MapMarker'
import { recordDtl, taskDtl } from '@/api/flow'
import { getDetail } from '@/api/workEvent'
import ImagePreviews from '@/components/ImagePreviews'

export default {
  components: {MapMarker, ImagePreviews},
  props: {
    /* 显示隐藏 */
    show: {
      type: Boolean,
      default: false
    },
    item: {
        type: Object,
        default: ()=>{}
    },
    id: {
        type: [String, Number, null],
        default: null
    }
  },
  watch: {
    show: {
      handler(val) {
        if (val) {
          this.getDtl();
        }else{
          this.$refs['MapMarker'] && this.$refs['MapMarker'].clearMarker()
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      form: {},
      map: null,
      history: []
    };
  },
  methods: {
    getDtl() {
      if (!this.id) return;
        if(this.item.taskId) {
            taskDtl({id: this.item.taskId}).then(res => {
      
            })
        }
      recordDtl({id: this.id}).then(res => {
        this.form = res.data && res.data.biz || {};
        if(this.form.location) {
          this.$nextTick(()=>{
            this.$refs['MapMarker'].addMarker(this.form.location)
          })
        }
        let historyArr = [];
        const startNode = {
            name: res.data.instance.startNodeName,
            endTime: res.data.instance.gmtCreate,
            handlerName: res.data.instance.creatorName,
            deptName: res.data.instance.deptName,
            status: null
        }

        const endNode = {
            name: res.data.instance.endNodeName,
            endTime: res.data.instance.gmtFinished,
            status: res.data.instance.status
        }


        if(res.data.instance.endNodeName) {
            historyArr.push(endNode)
        }
        historyArr.push(...res.data.history)
        historyArr.push(startNode)
        this.history = historyArr
      })
    },
    close() {
      this.form = {};
      this.$emit('update:show', false);
    },
    getState(state) {
      const STATE_S = {10:'进行中',20:'已完成',30:'已撤回',40:'强行中止',50:'挂起',99:'已废弃'}
      return state?STATE_S[state]: '--'
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  padding: 0 20px;
  .left {
    flex: 2;
    border-right: 1px solid #e5e5e5;

    padding-right: 30px;
  }
  .right {
    flex: 1.5;
    padding-left: 20px;
    .row {
        display: flex;
    }
  }
}

.el-descriptions .is-bordered .el-descriptions-item__cell {
    word-break: break-all;
}

::v-deep {
    .el-descriptions-item__label.is-bordered-label {
        width: 100px;
    }
}
</style>
